<template>
  <div class="cancel_detail">
    <van-sticky>
      <van-nav-bar
        title="核销详情"
        left-arrow
        @click-left="$router.back()"
        class="top_bar"
      />
    </van-sticky>
    <div class="content">
      <div class="type1" v-if="activeTab == 0 || activeTab == 1">
        <ul>
          <li class="type2_list">
            <ul>
              <li>
                <div class="left">核销流水号</div>
                <div class="right">{{ formData.serialNo }}</div>
              </li>
              <li>
                <div class="left">核销时间</div>
                <div class="right">{{ formData.createTime }}</div>
              </li>
              <li>
                <div class="left">{{ activeTab == 0 ? "券码" : "卡ID" }}</div>
                <div class="right">
                  {{
                    activeTab == 0
                      ? formData.couponCodes && formData.couponCodes.join("、")
                      : formData.cardNo
                  }}
                </div>
              </li>
              <li v-if="activeTab == 0">
                <div class="left">数量</div>
                <div class="right">
                  {{
                    activeTab == 0
                      ? formData.couponCodes && formData.couponCodes.length
                      : formData.cardType === "gift"
                      ? formData.verifyAmount / 100 + "元"
                      : formData.verifyAmount + "次"
                  }}
                </div>
              </li>
              <li v-if="activeTab == 1">
                <div class="left">总{{ childActive == 0 ? "额" : "数" }}</div>
                <div class="right">
                  {{
                    childActive == 0
                      ? (formData && formData.totalAmount / 100).toFixed(2) + "元"
                      : formData.totalAmount + "次"
                  }}
                </div>
              </li>
              <li v-if="activeTab == 1">
                <div class="left">剩余</div>
                <div class="right">
                  {{
                    childActive == 0
                      ? (formData && formData.leftAmount / 100).toFixed(2) + "元"
                      : formData.leftAmount + "次"
                  }}
                </div>
              </li>
              <li v-if="activeTab == 1">
                <div class="left">
                  核销{{ childActive == 0 ? "金额" : "数" }}
                </div>
                <div class="right">
                  {{
                    childActive == 0
                      ? (formData && formData.verifyAmount / 100).toFixed(2) + "元"
                      : formData.verifyAmount + "次"
                  }}
                </div>
              </li>
              <li>
                <div class="left">核销方</div>
                <div class="right">
                  {{
                    activeTab == 0
                      ? formData.merchantName || "-"
                      : formData.businessName || "无"
                  }}
                </div>
              </li>
              <li>
                <div class="left">核销门店</div>
                <div class="right">{{ formData.shopName || "-" }}</div>
              </li>
              <!-- <li>
                <div class="left">核销终端</div>
                <div class="right">
                  {{
                    activeTab == 0
                      ? formData.endpoint || "-"
                      : `${formData.endpointName}${formData.endpoint}`
                  }}
                </div>
              </li> -->
              <li>
                <div class="left">核销业务</div>
                <div class="right">
                  {{ bizCodeKeyOptions[formData.bizCode] || "-" }}
                </div>
              </li>
              <li>
                <div class="left">核销来源</div>
                <div class="right">
                  {{ sourceCodeKeyOptions[formData.sourceCode] || "-" }}
                </div>
              </li>
              <li>
                <div class="left">顾客</div>
                <div class="right">{{ formData.customerName || "-" }}</div>
              </li>
              <!-- <li>
                <div class="left">核销商户号</div>
                <div class="right">{{ formData.merchantName || "-" }}</div>
              </li> -->
              <li>
                <div class="left">核销订单号</div>
                <div class="right">{{ formData.orderNo || "-" }}</div>
              </li>
              <li>
                <div class="left">备注</div>
                <div class="right">{{ formData.remark || "-" }}</div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="type2" v-else-if="activeTab == 2 || activeTab == 3">
        <ul>
          <li class="type2_list">
            <ul>
              <li class="title">订单信息</li>
              <li>
                <div class="left">核销内容</div>
                <div class="right">
                  <span v-show="activeTab == 2">{{
                    formData.productName
                  }}</span>
                  <span v-show="activeTab == 3">
                    <span
                      v-for="(item, index) in formData &&
                      formData.userOrderVo &&
                      formData.userOrderVo.items"
                      :key="index"
                    >
                      {{ item.title }} * {{ item.num }}
                    </span>
                  </span>
                </div>
              </li>
              <li v-show="activeTab == 2">
                <div class="left">时间</div>
                <div class="right">{{ formData.dateDesc }}</div>
              </li>
              <li v-show="activeTab == 2">
                <div class="left">说明</div>
                <div class="right">{{ formData.remark || "无" }}</div>
              </li>
              <li v-show="activeTab == 2">
                <div class="left">数量</div>
                <div class="right">{{ formData.num }}</div>
              </li>
              <li v-show="activeTab == 3">
                <div class="left">手机号</div>
                <div class="right">{{ formData.phone }}</div>
              </li>
              <li v-show="activeTab == 3">
                <div class="left">提货地址</div>
                <div class="right">{{ formData.address }}</div>
              </li>
              <li>
                <div class="left">订单号</div>
                <div class="right">{{ formData.orderNo }}</div>
              </li>
              <li v-show="activeTab == 3">
                <div class="left">备注</div>
                <div class="right">{{ formData.remark || "无" }}</div>
              </li>
            </ul>
            <ul v-show="activeTab == 2" class="ul_2">
              <li class="title">预订人信息</li>
              <li>
                <div class="left">预订人</div>
                 <div class="right" >
                  <span
                    v-for="(item, index) in bizData.checkInList"
                    :key="index"
                    >{{ item }}{{index==bizData.checkInList.length-1?'':`&nbsp;&nbsp;|&nbsp;&nbsp;`}}</span
                  >
                </div>
              </li>
              <li>
                <div class="left">手机号</div>
                <div class="right">{{ bizData.checkInPhone }}</div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
	
	<van-button @click="repBtn" plain type="primary" class="repBtn">重打小票</van-button>
  </div>
</template>
<script>
import { getProtDetail,print } from "@/api/cancelReport";
export default {
  data() {
    return {
      formData: {},
      bizCodeKeyOptions: {
        0: "其它业务",
        9000: "收款",
        9001: "会员充值",
        9002: "会员开卡",
        9003: "赠送会员",
        9004: "预订",
        9005: "微点餐",
        9006: "商家助手小程序",
        9007: "校园缴费",
        9008: "POS机APP",
        9010: "会员年费缴纳",
        9011: "积分商城",
        9012: "码牌支付",
        9013: "商城",
        9050: "推广奖励",
        9051: "会员导入",
        9052: "人工客服",
        9053: "充值赠送",
        9054: "升级赠送",
        9055: "卡过期清零",
        9056: "优惠券核销",
        9057: "积分清零",
        9070: "扫码领取优惠券",
        9071: "营销赠送",
        9072: "卡券预制",
        9100: "开放平台",
        9110: "消费奖励",
        9112: "好友消费",
        9114: "好友充值",
      },
      sourceCodeKeyOptions: {
        0: "其它来源",
        801: "微信公众号",
        802: "微信会员小程序",
        803: "商家助手小程序",
        804: "微信支付助手小程序",
        810: "支付宝服务窗",
        820: "POS机APP",
        821: "静态二维码",
        822: "简易扫码设备",
        823: "消费机",
        824: "PC插件",
        830: "商户后台",
        831: "服务商后台",
        832: "付惠吧后台",
        840: "开放平台",
        841: "聚合支付平台",
        842: "商户app",
      },
      activeTab: 0,
      bizData: "",
      childActive: "",
    };
  },
  created() {
    this.activeTab = this.$route.query.activeTab;
    this.childActive = this.$route.query.childActive;
    let { type, code } = this.$route.query;
    getProtDetail({ type, code }).then((result) => {
      let { data } = result;
      if (data.code == 0) {
        this.formData = data.data;
        if (this.activeTab == 2) {
          this.bizData = JSON.parse(data.data.bizData);
        } else if (this.activeTab == 3) {
          this.formData = data.data.data;
        }
      }
    });
  },
  methods:{
	  // 重打小票
	  repBtn(){
		  let {code,type,shopId} = this.$route.query
		  let params = {code, shopId, type}
		  print(params).then(res => {
			  console.log('重打小票',res)
		  })
	  }
  }
};
</script>
<style lang="less" scoped>
.cancel_detail {
  width: 100%;
  height: 100vh;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: scroll;
    padding: 24px 32px;
    .type2,
    .type1 {
      background: #ffffff;
      box-shadow: 0px 0px 5px 0px rgba(166, 155, 149, 0.12);
      border-radius: 15px;
      overflow: hidden;
      line-height: 40px;
      padding: 50px;
      .type2_list {
        :last-child > {
          :last-child {
            margin-bottom: 0 !important;
          }
        }
        .ul_2 {
          padding-top: 35px;
        }
        ul {
          // margin-bottom: 35px;
          > :not(.title) {
            display: flex;
            margin-bottom: 35px;
            line-height: 40px;
            font-size: 28px;
            .left {
              flex: 1;
              opacity: 0.8;
            }
            .right {
              flex: 2;
              word-break: break-all;
            }
          }
          > .title {
            margin-bottom: 40px;
            position: relative;
            display: flex;
            align-items: center;
            font-size: 28px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #131313;
          }
        }
      }
    }
  }
  .repBtn{
	  width:200px;
	  margin:50px auto;
	  border-color:#feaf39;
	  color:#feaf39;
  }
}
</style>